<template>
    <div>
        <!--        <div class="page-header">-->
        <!--            <Row>-->
        <!--                <Col span="5">-->
        <!--                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />-->
        <!--                </Col>-->
        <!--                <Col span="5">-->
        <!--                    <Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" />-->
        <!--                </Col>-->
        <!--                <Col span="4">-->
        <!--                    <Button type="primary" class="lyx-mr10">查询</Button>-->
        <!--                </Col>-->
        <!--            </Row>-->
        <!--        </div>-->
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="4" show-total />
                </Col>
            </Row>
        </div>
        <Modal v-model="modal1" title="项目详情" @on-ok="modal1 = false" @on-cancel="modal1 = false" width="60">
            <div class="detail">
                <Divider orientation="left">项目详情</Divider>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">项目名称:</span>
                        <span>{{dataInfo.name}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">参评社会组织性质:</span>
                        <span>{{dataInfo.organizations}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">评估年度:</span>
                        <span>{{dataInfo.year}}</span>
                    </Col>
                    <Col span="12">
                        <span class="bold">评估申请截止时间:</span>
                        <span>{{dataInfo.end_time}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">参评条件:</span>
                        <span>{{dataInfo.evaluation}}</span>
                    </Col>
                </Row>
                <Divider orientation="left">申报内容</Divider>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">申请标题:</span>
                        <span>{{dataInfo.title}}</span>
                    </Col>
                    <Col span="10">
                        <span class="bold">申请内容:</span>
                        <span>{{dataInfo.content}}</span>
                    </Col>
                </Row>
                <Row class="p10" style="height: 30px; font-size: 15px">
                    <Col span="12">
                        <span class="bold">申请材料:</span>
                        <span>{{dataInfo.material}}</span>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="modal1 = false">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" title="专家评分" @on-ok="modal2 = false" @on-cancel="modal2 = false" width="60">
            <div class="detail">
                <Form :model="formItem" :label-width="220">
                    <FormItem label="评分">
                        <Row>
                            <Col span="18" class="lyx-mb10">
<!--                                <Table border ref="selection" :columns="columns5" :data="data2" @on-selection-change="tableSelectChange"></Table>-->
                                <Table border :columns="columns5" :data="data2">
                                    <template slot-scope="{ row }" slot="title">
                                        <strong>{{ row.title }}</strong>
                                    </template>
                                    <template slot-scope="" slot="打分">
                                        <Input v-model="formItem.score" placeholder="分数" style="width: 75%"></Input>
<!--                                        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看详情</Button>-->
<!--                                        <Button type="error" size="small" @click="declareInfo(row)">评分</Button>-->
                                    </template>
                                </Table>
                            </Col>
                        </Row>
                        <Input v-model="formItem.score" placeholder="分数" style="width: 75%"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" size="large"   @click="ok(formItem)">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      submitInfo: {},
      dataInfo: {},
      formItem: {
        idea: ''
      },
      columns4: [
        {
          title: '申报项目名称',
          key: 'name'
        },
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '内容',
          key: 'content'
        },
        {
          title: '分数',
          key: 'score'
        },
        {
          title: '操作',
          key: 'age',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'success', size: 'small' },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.dataInfo = params.row
                  }
                }
              }, '查看详情')
            )
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginLeft: '5px' },
                on: {
                  click: () => {
                    this.declareInfo(params.row)
                  }
                }
              }, '评分')
            )
            return h('div', temp)
          }
        }
      ],
      data1: [
        {
          id: 1,
          name: '守护生命，救在身边',
          organizations: '1',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: '申报守护生命，救在身边创新项目',
          content: '守护生命，救在身边创新项目',
          score: '1',
          material: '材料',
          state: '未审批'
        },
        {
          id: 2,
          name: '论技术',
          organizations: '1',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: '申报论技术创新应用项目',
          content: '论技术创新的应用性',
          score: '2',
          material: '材料',
          state: '已通过'
        },
        {
          id: 3,
          name: '复杂产品系统创新',
          organizations: '1',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: '申请复杂产品系统创新项目',
          content: '复杂产品系统创新',
          score: '3',
          material: '材料',
          state: '未通过'
        },
        {
          id: 4,
          name: '社会治理与社会创新',
          organizations: '1',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: '申报社会治理与社会创新项目',
          content: '社会治理与社会创新',
          score: '4',
          material: '材料',
          state: '未通过'
        },
        {
          id: 3,
          name: '创新治理与社会服务',
          organizations: '1',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: '创新治理与社会服务',
          content: '创新治理与社会服务',
          score: '3',
          material: '材料',
          state: '未通过'
        },
        {
          id: 4,
          name: '创新城',
          organizations: '1',
          year: '2019',
          end_time: '2019-10-1',
          evaluation: '条件',
          title: '创新城',
          content: '创新城',
          score: '4',
          material: '材料',
          state: '未通过'
        }
      ],
      columns5: [
        {
          title: '规则',
          slot: 'title'
        },
        {
          title: '分数范围',
          key: 'score'
        },
        {
          title: '打分',
          slot: '打分',
          align: 'center'
        }
      ],
      data2: [
        {
          title: '创新思路',
          score: '1-5分'
        },
        { title: '技术应用', score: '1-8分' },
        { title: '解决问题', score: '5-10分' },
        { title: '推广问题', score: '1-5分' }
      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    show () {
      this.modal1 = true
      this.dataInfo = params.row
    },
    declareInfo (item) {
      console.log(item)
      this.formItem.score = item.score
      this.submitInfo = item
      this.modal2 = true
    },
    ok (item) {
      console.log('!!!!')
      console.log(this.submitInfo)
      for (var i = 0; i < this.data1.length; i++) {
        if (this.data1[i].id === this.submitInfo.id) {
          this.data1[i].score = this.formItem.score
          this.modal2 = false
        }
      }
    }
  }
}
</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
